<template>
  <div>
    <el-button @click="testCarApi">
      点击测试车辆接口
    </el-button>
    <el-button @click="testShipApi">
      点击测试船舶接口
    </el-button>
    <el-button @click="testCrossApi">
      点击测试跨域接口
    </el-button>
    <el-button @click="testSecondHouseApi">
      点击测试二手房接口
    </el-button>
    <el-button @click="testCityHouseApi">
      点击测试全市有无房接口
    </el-button>
    <el-button @click="testHouseOwnershipApi">
      点击测试房屋权属接口
    </el-button>
    <el-button @click="testEstateApi">
      点击测试不动产接口
    </el-button>

    <!-- 添加不动产PDF数据展示表格 -->
    <el-dialog v-model="dialogVisible" title="不动产信息" width="80%">
      <el-table :data="estateTableData" border style="width: 100%">
        <el-table-column prop="certinfo.awarddate" label="颁发日期" />
        <el-table-column prop="certinfo.certawarddept" label="颁发部门" />
        <el-table-column prop="certinfo.certname" label="证照名称" />
        <el-table-column prop="certinfo.certownername" label="证照拥有人" />
        <el-table-column prop="certinfo.certownerno" label="证照拥有人证件号" />
        <el-table-column prop="certinfo.expiredateto" label="土地使用结束时间" />
        <el-table-column prop="certinfo.expiredatefrom" label="土地使用开始时间" />
        <el-table-column prop="certinfoextension.bdcdyh" label="不动产单元号" />
        <el-table-column prop="certinfoextension.bh" label="证照流水号" />
        <el-table-column prop="certinfoextension.fj" label="附记" />
        <el-table-column prop="certinfoextension.qlqtqk" label="共有情况/面积等" />
        <el-table-column prop="certinfoextension.nyr" label="年月日" />
        <el-table-column prop="certinfoextension.qllx" label="权利类型" />
        <el-table-column prop="certinfoextension.qlxz" label="权利性质" />
        <el-table-column prop="certinfoextension.tdsyqx" label="使用期限" />
        <el-table-column prop="certinfoextension.zl" label="坐落" />
        <el-table-column prop="certinfoextension.zh" label="不动产权证号" />
        <el-table-column label="PDF文件">
          <template #default="scope">
            <el-button
                v-if="scope.row.certinfoextension && scope.row.certinfoextension.file"
                @click="showPdf(scope.row.certinfoextension.file)"
                type="primary"
                size="small">
              查看PDF
            </el-button>
            <span v-else>无PDF文件</span>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">关闭</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

async function testCarApi() {
  await axios.post("/api/external/carInformation",
      {"idNumber": "320704197607103031"}).then(res => {
    console.log("车辆信息返回:", res.data.data.datas);
  })
}

async  function testShipApi() {
  await axios.post("/api/external/shipInformation",
      {"name": "陈士忠"}).then(res => {
    console.log("船舶信息返回:", res.data.data.datas);
  })
}

async function testCrossApi() {
  await axios.post("/api/external/crossCar", {
    name: "宿州汽车运输集团有限公司灵璧分公司"
  }).then(res => {
    console.log("跨域信息返回:", res.data.data.datas);
  })
}

async function testSecondHouseApi() {
  await axios.post("/api/external/secondHangHouse",
      {"name": "李沛桐", "idNumber": "320721198602142825"}).then(res => {
    console.log("二手房信息返回:", res.data.data.data);
  })
}

async function testCityHouseApi() {
  await axios.post("/api/external/cityHouse",
      {"name": "李沛桐", "idNumber": "320721198602142825"}).then(res => {
    console.log("全市有无房信息返回:", res.data.data.data);
  })
}

async function testHouseOwnershipApi() {
  await axios.post("/api/external/houseOwnership",
      {"name": "李沛桐", "idNumber": "320721198602142825"}).then(res => {
    console.log("房屋权属信息返回:", res.data.data.data);
  })
}

async function testEstateApi() {
  try {
    const response = await axios.post("/api/external/realEstate",
        {"idNumber": "320721198602142825"});

    console.log("不动产信息返回:", response.data.data.custom.info);

    // 将数据设置到组件中以供显示
    // 注意: 在实际使用中，你需要通过适当的方式将数据传递给组件
    // 这里我们直接调用组件方法来显示数据
    if (this && this.showEstateData) {
      this.showEstateData(response.data.data.custom.info);
    }

  } catch (error) {
    console.error("获取不动产信息失败:", error);
  }
}

export default {
  name: "TestAPI",
  data() {
    return {
      dialogVisible: false,
      estateTableData: []
    };
  },
  methods: {
    testCarApi,
    testShipApi,
    testCrossApi,
    testSecondHouseApi,
    testCityHouseApi,
    testHouseOwnershipApi,
    testEstateApi,

    // 显示不动产数据的方法
    showEstateData(data) {
      // 确保数据是数组格式
      if (Array.isArray(data)) {
        this.estateTableData = data;
      } else if (data) {
        this.estateTableData = [data];
      } else {
        this.estateTableData = [];
      }
      this.dialogVisible = true;
    },

    // 显示PDF的方法
    showPdf(base64Data) {
      // 去掉 data URI 前缀
      const base64 = base64Data.replace(/^data:application\/pdf;base64,/, '');

      try {
        const byteCharacters = atob(base64);
        const byteNumbers = new Array(byteCharacters.length);
        for (let i = 0; i < byteCharacters.length; i++) {
          byteNumbers[i] = byteCharacters.charCodeAt(i);
        }
        const byteArray = new Uint8Array(byteNumbers);
        const blob = new Blob([byteArray], { type: 'application/pdf' });

        const url = URL.createObjectURL(blob);
        window.open(url, '_blank');
      } catch (e) {
        console.error('Base64 解码失败:', e);
      }
    }
  }
};
</script>
